
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

<f:loadBundle basename="demo.bundle.Messages" var="msg" />

<html>
<head>
<title>Echo</title>
<style type="text/css">
.rsPanel {
	border-width: 1px;
	border-style: solid;
	padding: 10px;
	background-position: top left;
	background-repeat: repeat-x;
}

.rsInput {
	border-style: solid;
	border-width: 1px;
}

.rsButton {
	border-width: 2px;
	border-style: outset;
}

.rsLabel {
	font-size: 14px;
}
</style>
</head>
<body>
<f:view>

	<h:form>
		<rich:panel>
			<f:facet name="header">
				<h:outputText value="Applying Skin on non-RichFaces Components" />
			</f:facet>

			<rich:separator height="1" style="padding:10px 0" />

			<h:panelGrid style="padding: 15px" styleClass="rsPanel" width="250"
				columns="2">
				<h:outputText styleClass="rsLabel" value="Name:" />
				<h:inputText styleClass="rsInput" value="#{bean.name}" />

				<h:outputText styleClass="rsLabel" value="Job:" />
				<h:inputText styleClass="rsInput" value="#{bean.job}" />

				<h:panelGroup />
				<h:commandButton styleClass="rsButton" value="Submit">
					<a4j:support disableDefault="true" event="onclick" reRender="out" />
				</h:commandButton>

				<f:facet name="footer">
				</f:facet>

			</h:panelGrid>
			<h:panelGrid id="out" columns="1">

				<rich:spacer height="10" />
				<h:outputText value="You have just entered:" />
				<h:outputText value="" />
				<h:outputText value="Name: #{bean.name}" />
				<h:outputText value="Job: #{bean.job}" />
			</h:panelGrid>
		</rich:panel>
	</h:form>

	<h:form>
		<rich:panel header="#{msg.echo_header}">
			<h:panelGrid columns="2">
				<h:inputText size="50" value="#{bean.text}">
					<a4j:support event="onkeyup" reRender="echo" />
				</h:inputText>
				<h:outputText value="#{bean.text}" id="echo" />
				<h:commandButton action="action" actionListener="#{bean.print}"
					value="#{msg.botton_print}" />
				<h:commandButton action="#{bean.goTo}" value="#{msg.botton_cancel}" />
			</h:panelGrid>
		</rich:panel>
	</h:form>
</f:view>
</body>
</html>
